<template>
  <div class="house-list">
    <date-list :dateList="rooms" ref="dataList"></date-list>
    <div class="stauts-menu">
      <a-button-group>
        <template v-if="!ldsjSelectedDate">
          <a-button size="large" @click="changeOrderStatus('0')" class="font12" :class="{active:active==='0'}">{{ $t('public.allTheRoom') }}</a-button>
        </template>
        <a-button size="large" @click="changeOrderStatus('3')" class="font12" :class="{active:active==='3'}">{{ $t('public.notCheckIn') }}</a-button>
        <template v-if="isCurrentDay">
          <a-button size="large" @click="changeOrderStatus('1')" class="font12" :class="{active:active==='1'}">{{ $t('public.checkInToday') }}</a-button>
          <a-button size="large" @click="changeOrderStatus('2')" class="font12" :class="{active:active==='2'}">{{ $t('public.checkOutToday') }}</a-button>
        </template>
      </a-button-group>
      <!-- <a-button style="float:right; margin-right:10px;" class="font12" @click="handleRefresh">{{ $t('public.refresh') }}</a-button> -->
      <a-button style="float:right; margin-right:10px;" class="font12" @click="handleReset">{{ $t('public.reset') }}</a-button>
      <span class="searItem">
        <a-icon type="search" class="search-ico"/>
        <a-input-search placeholder="请输入房号查询" v-model="num" @search="searchRoomNo">
          <a-button slot="enterButton" class="font12" style="color:#1890FF;">{{ $t('public.search') }}</a-button>
        </a-input-search>
      </span>
    </div>
    <room-list :orderList="currentOrderList"></room-list>
    <div class="example" v-if="loading">
      <a-spin class="loadingcenter" />
    </div>
  </div>
</template>
<script>
import DateList from '@/views/house/status/module/DateList'
import RoomList from '@/views/house/status/module/RoomList'
import { parseTime } from '@/utils/util'
import { mapActions, mapGetters, mapMutations } from 'vuex'
import moment from 'moment'
export default {
  name: 'HouseList',
  components: {
    DateList,
    RoomList
  },
  data () {
    return {
      loading: false,
      num: '',
      isCurrentDay: true, // 是否今日
      currentOrderList: [],
      currentTime: '', // 当前时间
      currentSelectDate: '', // 当前选中日期
      active: '0'
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'rooms',
      'orderList',
      'orders', // 根据日期查询订单列表
      'ldsjSelectedDate', // 预定查询时数据保留
      'STORE_ID',
      'OPERATOR_TYPE',
      'storeRefreshTime'
    ])
  },
  watch: {
    storeRefreshTime () {
      this.handleRefresh()
    }
  },
  methods: {
    ...mapActions([
      'getHouseOrderList',
      'getHouseOrders'
    ]),
    ...mapMutations([
      'setOrders'
    ]),
    init (curretDate) {
      this.loading = true
      const data = {
        hoperatorId: this.userInfo.id,
        storesId: this.STORE_ID,
        jylx: this.OPERATOR_TYPE
      }
      let type = ''
      if (this.num) {
        type = 2 // 代表操作之后 要保留筛查后得值
      }
      // 判断是否初始化，第一次加载页面
      if (this.orderList.length === 0) {
        this.getHouseOrderList(data).then((res) => {
          this.currentSelectDate = curretDate
          let list = ''
          if (curretDate === moment().format('YYYY-MM-DD') && !this.orderList[`${this.currentSelectDate}`]) {
            this.$notification['warning']({
              message: this.$t('message.hint'),
              description: '本地日期不正确，请先设置,在重新登录！',
              duration: 10
            })
          } else {
            list = this.orderList[`${this.currentSelectDate}`].date
            this.setOrders(list) // 更新当前选中如期数据
            this.changeOrderStatus(this.active, type)
            this.loading = false
          }
        })
      } else {
        // 刷新数据
        console.log(curretDate, this.orderList, this.orderList[curretDate])
        if (this.orderList[curretDate]) {
          // 默认日期刷新数据
          this.getHouseOrderList(data).then((res) => {
            this.currentSelectDate = curretDate
            const list = this.orderList[`${this.currentSelectDate}`].date
            this.setOrders(list) // 更新当前选中如期数据
            this.changeOrderStatus(this.active, type)
            if (this.ldsjSelectedDate) {
              // 是否 预定房源的操作更新数据（筛查日期可能在默认数据里面）
              const param = [curretDate, this.ldsjSelectedDate]
              this.selectRangeDate(param, '3', type)
            } else {
              this.loading = false // 查询预定时间可能是在默认展示日期内 所以也要更新
            }
          })
        } else {
          // 是否 选择日或是预定房源的操作更新数据
          let param = ''
          let selTatus = null
          let active = ''
          if (this.ldsjSelectedDate) {
            param = [curretDate, this.ldsjSelectedDate]
            active = '3'
          } else {
            param = curretDate
            active = '0'
            selTatus = '0'
          }
          this.selectRangeDate(param, active, type, selTatus)
        }
      }
    },
    /**
     * 时间栏
     * @param day 选中日期
     */
    changeDate (day) {
      if (this.currentTime === day) {
        this.isCurrentDay = true
      } else {
        this.isCurrentDay = false
      }
      console.log(day)
      this.active = '0'
      this.num = ''
      this.currentSelectDate = day
      this.currentOrderList = this.orderList[`${day}`].date
      this.setOrders(this.currentOrderList)
    },
    /**
     * 点击房源状态
     *@param  status 状态, 0:全部,1:今日入住,2:今日离店, 3、4、null: 未入住
     *@param  type 状态 2 代表要保留房间号搜查结果 否则就不保留
     */
    changeOrderStatus (status, type) {
      if (type !== 2) {
        this.active = status
        const list = this.orders
        if (list) {
          const filerList = list.filter((item) => {
            if (status === '1') {
              if (parseTime(item['orderList'][0].rzsj, `{yy}-{mm}-{dd}`) === this.currentTime && item['orderList'][0].ddzt === status) {
                console.log(item)
                return item
              }
            } else if (status === '2') {
              if (parseTime(item['orderList'][0].ldsj, `{yy}-{mm}-{dd}`) === this.currentTime && item['orderList'][0].ddzt === status) {
                console.log(item)
                return item
              }
            } else if (status === '0') {
              return list
            } else {
              if (!item['orderList'][0].ddzt || item['orderList'][0].ddzt === '3' || item['orderList'][0].ddzt === '4') {
                console.log(item)
                return item
              }
            }
          })
          this.currentOrderList = filerList
          this.num = '' // 初始化房号搜素
        }
      } else {
        this.searchRoomNo(this.num)
      }
    },
    /**
     * 按区间日期选择
     * @param date 日期 一个代表选择日期 数据是房源预定
     * @param fwrzzt 筛选状态  一个代表选择日期 是全部 '0'  房源预定是'3'
     * @param type 是否保留房号筛查后的值 2保留; '' 不保留
     * @param selTatus 代表 全部房态 未入住状态（主要是日期筛选和预定房源）默认null 如果为'0',this.active 保持不变
     */
    async selectRangeDate (date, fwrzzt, type, selTatus) {
      this.loading = true
      this.isCurrentDay = false
      let ksrq = ''; let jsrq = ''
      if (Array.isArray(date)) {
        console.log('t')
        ksrq = moment(date[0]).hours(14).set('minutes', 0).set('seconds', 0).format('YYYY-MM-DD HH:mm:ss')
        jsrq = moment(date[1]).hours(12).set('minutes', 0).set('seconds', 0).format('YYYY-MM-DD HH:mm:ss')
      } else {
        ksrq = moment(date).hours(14).set('minutes', 0).set('seconds', 0).format('YYYY-MM-DD HH:mm:ss')
        jsrq = moment(date).hours(23).set('minutes', 59).set('seconds', 59).format('YYYY-MM-DD HH:mm:ss')
      }
      const data = {
        hoperatorId: this.userInfo.id,
        storesId: this.STORE_ID,
        jylx: this.OPERATOR_TYPE,
        ksrq: ksrq,
        jsrq: jsrq,
        fwrzzt: fwrzzt // 3:未入住状态
      }
      const list = await this.getHouseOrders(data)
      if (selTatus !== '0') {
        this.active = String(fwrzzt)
      }
      if (type !== 2) {
        this.num = '' // 初始化房号搜素
        // 判断是否选中日期 更新数据且保留 入住状态 '0'是保留筛选入住状态
        if (selTatus !== '0') {
          this.currentOrderList = list.date
        } else {
          this.changeOrderStatus(this.active)
        }
      } else {
        this.searchRoomNo(this.num)
      }
      this.loading = false
    },
    resetHouseOrderStatus () {
      this.isCurrentDay = true
    },
    /**
     * 搜索房号
     * @num 房号
     */
    searchRoomNo (num) {
      this.active = '0'
      const list = this.orders
      if (num) {
        const filerList = list.filter((item) => {
          if (item['fh'].indexOf(num) >= 0) {
            return item
          }
        })
        this.currentOrderList = filerList
      } else {
        this.currentOrderList = list
        return this.currentOrderList
      }
    },
    handleReset () {
      this.num = null
      this.active = '0'
      this.currentOrderList = this.orders
    },
    handleRefresh () {
      this.num = null
      this.active = '0'
      this.isCurrentDay = true
      const curretDate = moment().format('YYYY-MM-DD')
      this.currentTime = curretDate
      this.$refs.dataList.currentIndex = 0
      this.$refs.dataList.isDateCheck = false // 设定日期下标状态
      this.$refs.dataList.setCurrentSelectedDate(curretDate) // 设定日期下标状态
      this.$refs.dataList.setLdsjSelectedDate('') // 除了预定查询时保留，其他删除
      this.$refs.dataList.isDateAreaShow = false
      this.$refs.dataList.selDate = null // 初始化单个日期
      this.init(curretDate)
    }
  },
  created () {
    const curretDate = moment().format('YYYY-MM-DD')
    this.currentTime = curretDate
    this.init(curretDate)
  }
}
</script>
<style lang="less" scoped>
.house-list {
  .example{left: 0;right:0;}
  .stauts-menu {
    margin-bottom: 10px;
    width: 100%;
    color:#666 !important;
    margin:16px 0;
    font-size: 12px;
    .ant-btn-group{
      border-radius: 5px;
      background-color: #fff;
      .ant-btn{height:32px;width:99px;border-color: #DDD;
        border-left-color:#EEEEEE; }
      .ant-btn:active, .ant-btn.active {
        color: #1890FF;
        border-color: #77B7F3;
        background-color: transparent;
        }
      .ant-btn:hover, .ant-btn.fouse {
        color: #1890FF;
        background-color: transparent;
        border-color: #77B7F3;
        }
    }
  }
  .room-card-list{padding:0;margin-left:-5px;margin-right:-5px;display: block;width: auto;height:calc(100vh - 290px)!important;min-width: auto;}
  .search-ico{position: absolute;top:10px;left:18px;z-index:2;color:#999999}
  .searItem{
    float:right;
    width:208px;
    position: relative;
    margin-right: 16px;
  }
 /deep/ .ant-input-search.ant-input-search-enter-button > .ant-input{
    padding-left:36px;
    font-size:12px;
  }
}
</style>
